import React, { useEffect, useRef } from 'react';
import ChatInput from '@/components/ChatContainer/input/ChatInput';
import ChatContainer from '@/components/ChatContainer';
import { useAppSelector } from '@/store';

const Chat: React.FC = () => {
  const scrollRef = useRef<HTMLDivElement>(null);

  const { history, currentDialog } = useAppSelector((state) => state.chat);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [history, currentDialog]);
  const contentRender = () => {
    return (
      <div className="h-full w-full">
        <div className=" h-[90vh]  overflow-auto pb-3" ref={scrollRef}>
          <ChatContainer />
        </div>
        <div className="w-full h-1/6">
          <ChatInput />
        </div>
      </div>
    );
  };

  return <div className="">{contentRender()}</div>;
};

export default Chat;
